<template>
    <div class="page">
        <svg style="display: none;">
            <defs>
                <filter id="noice" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox"
                    primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
                    <feTurbulence type="turbulence" :baseFrequency="svgFreq" numOctaves="2" seed="2" stitchTiles="stitch"
                        x="0%" y="0%" width="100%" height="100%" result="turbulence1" />
                    <feDisplacementMap in="SourceGraphic" in2="turbulence1" scale="30" xChannelSelector="R"
                        yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" result="displacementMap" />
                </filter>
            </defs>
        </svg>
        <div class="malfunc fdisrxy" @mouseenter="onHover">
            Try hover
        </div>
        <a href="https://yoksel.github.io/svg-filters/#/" style="margin-top: 50px;color: lightblue;" target="_blank">svg Filter</a>
    </div>
</template>
<!-- svg Filter 传送门 https://yoksel.github.io/svg-filters/#/ -->
<script setup>
import gsap from 'gsap'
import { onMounted, ref } from 'vue';
const val = {
    freq: 0.00001,
    freqh:0
}
let svgFreq = ref(`${val.freqh} ${val.freq}`)

const tl = new gsap.timeline({
    paused: true,
    onUpdate() {
        svgFreq.value = `${val.freqh} ${val.freq}`
    }
})
tl.to(val, {
    freq: 0.4,
    freqh:0,
    duration: 0.1
})

tl.to(val, {
    freq: 0.00001,
    freqh:0,
    duration: 0.1
})

// onMounted(() => {

// })



function onHover() {
    tl.restart()
}
</script>

<style lang="scss">
.page {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: black;
}

.malfunc {
    width: 300px;
    height: 100px;
    background-color: orangered;
    border-radius: 10px;
    color: white;
    font-size: 30px;
    font-weight: bolder;
    cursor: pointer;
    font-family: 'Courier New', Courier, monospace;
    filter: url(#noice);
}
</style>